<template lang="pug">
  el-card(:bodyStyle="{padding: '30px'}" shadow="never" style="border: none")
    .courseDetailWrapper
      .headerBox.tr
        el-button(v-if="info.audited === 0" size="large" round @click="auditHandle(2)" :loading="auditSubmitting") 不通过
        el-button(v-if="info.audited === 0" size="large" round @click="auditHandle(1)" :loading="auditSubmitting") 通过
        el-button.gradientVertical(size="large" round @click="addVisible = true") 修改
      el-row(:gutter="40")
        el-col(:span="13")
          .mediaBox
            el-image(v-if="info.resType === 'image'" :src="info.resURL" style="width: 100%; height: 560px" :fit="cover")
            el-image(v-else :src="info.cover" style="width: 100%; height: 560px" :fit="cover")
        el-col(:span="11")
          .detailBox
            h2 {{info.title}}
            p.tags
              span.tag {{info.dirTitle}}
            p.small
              span 浏览人数：{{info.visitorCount || 0}}
              span 发布时间：{{info.created | dateFilter('YYYY/MM/DD')}}
              span 好评度：
                b.c_red.f30 {{info.rankVal || 0}}%
            .teacher
              .avatarBox
                el-avatar(:src="info.staffHeadImg" :size="52")
              h3.f18 {{info.staffName || '无'}}
              span.tag {{info.positonName || '无'}}
            .detail {{info.description}}
            .footerBtns
              el-button.gradientVertical(size="large" round style="height: 60px; border-radius: 30px;padding: 0 40px") 下载附件
      el-tabs.tabs(v-model="activeTab")
        el-tab-pane(v-for="tab in tabs" :label="tab.label" :name="tab.name" :key="tab.name")
          .richBox(v-html="info.attachJSON")
    add-drawer(:visible.sync="addVisible" :id="info.id" type="update" @getList="getInfo" :detail="info")
</template>
<script>
import { docSubmit } from './api'
import AddDrawer from './components/addDrawer'

export default {
  components: {
    AddDrawer
  },
  data () {
    return {
      loading: false,
      auditSubmitting: false,
      info: {},
      activeTab: 'overview',
      tabs: [
        { label: '课程概述', name: 'overview' }
      ],
      addVisible: false
    }
  },
  computed: {
    id () {
      return this.$route.query.id
    }
  },
  created () {
    this.getInfo()
  },
  methods: {
    getInfo () {
      const { id } = this
      this.loading = true
      docSubmit({ id }, 'get').then(res => {
        this.info = res
      }).finally(() => {
        this.loading = false
      })
    },
    // 审批
    auditHandle (audited) {
      const { info } = this
      this.auditSubmitting = true
      docSubmit({
        ...info,
        audited
      }).then(() => {
        this.$message.success('提交成功')
        this.getInfo()
      }).finally(() => {
        this.auditSubmitting = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.courseDetailWrapper{
  .headerBox {
    margin-bottom: 20px
  }

  .mediaBox{
    height: 560px;
    background: #f4f6f8;
  }

  .detailBox {
    h2 {
      font-size: 21px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
      line-height: 1.5;
    }

    > p {
      line-height: 1;
      + p {
        margin-top: 12px
      }
    }

    .tags{
      .tag{
        display: inline-block;
        background: #FAFAFA;
        border: 1px solid #E8E8E8;
        font-size: 15px;
        font-family: PingFang SC;
        ;
        color: #DA473A;
        padding: 0 20px;
        height: 30px;
        line-height: 30px;

        + .tag{
          margin-left: 10px
        }
      }
    }

    p.small{
      font-size: 15px;
      font-family: PingFang SC;
      ;
      color: #999999;

      > span {
        position: relative;

        + span {
          margin-left: 16px;
          padding-left: 16px;

          &::before{
            position: absolute;
            content: '';
            display: block;
            width: 1px;
            background: #999;
            left: 0;
            top:3px;
            bottom: 3px
          }
        }
      }
    }

    > .teacher{
      margin-top: 56px;
      display: flex;
      flex-direction: row;
      align-items: center;

      .avatarBox{
        border: 2px solid #fff;
        width: 56px;
        height: 56px;
        border-radius: 28px;
        display: inline-block;
        box-shadow: 1px 2px 4px 4px rgba(0, 0, 0 ,0.08);
      }

      > h3 {
        font-size: 17px;
        color: #333;
        margin-left: 20px;
      }

      > .tag{
        border: 1px solid #6E645A;
        margin-left: 10px;
        border-radius: 15px;
        font-size: 13px;
        height: 30px;
        line-height: 30px;
        padding: 0 20px;
        font-family: PingFang SC;
        ;
        color: #6E645A;
      }
    }

    > .detail{
      font-size: 15px;
      font-family: PingFang SC;
      ;
      color: #6E645A;
      line-height: 24px;
      margin-top: 30px;
    }

    > .footerBtns{
      margin-top: 20px
    }
  }

  .tabs{
    margin-top: 40px;

    ::v-deep{
      > .el-tabs__header{
        background-color: #FAFAFA;

        .el-tabs__nav-wrap {
          &::after, .el-tabs__active-bar{
            display: none;
          }
        }

        .el-tabs__item{
          height: 60px;
          line-height: 60px;
          margin: 0 60px;
          font-size: 17px;
          color: #333333;
          position: relative;

          &.is-active{
            font-weight: bold;
            &::after{
              content: '';
              display: block;
              position: absolute;
              height: 5px;
              background: linear-gradient(0deg, #F5AC3C 0%, #AACD22 100%);
              bottom: 0;
              left: 12px;
              right: 12px
            }
          }
        }
      }
    }

    .richBox{
      margin-top: 30px
    }
  }
}
</style>
